<template>
  <view class="datetime-picker">
    <view class="label">
      <text v-if="required" class="required">*</text>
      {{ label }}
    </view>
    <view class="picker-container" :class="{ 'error': showError }">
      <picker 
        mode="date"
        :value="dateValue"
        @change="handleDateChange"
      >
        <view class="uni-input date-part">{{ dateValue || '请选择日期' }}</view>
      </picker>
      <view class="divider"></view>
      <picker 
        mode="time"
        :value="timeValue"
        @change="handleTimeChange"
      >
        <view class="uni-input time-part">{{ timeValue || '请选择时间' }}</view>
      </picker>
    </view>
    <text v-if="showError" class="error-text">{{ errorMessage }}</text>
  </view>
</template>

<script setup>
import { computed, ref, watch, nextTick } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: '日期时间'
  },
  required: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const touched = ref(false)
const errorMessage = ref('')
const dateValue = ref('')
const timeValue = ref('')

// 监听 modelValue 变化，拆分日期和时间
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      const [date, time] = newVal.split(' ')
      dateValue.value = date
      timeValue.value = time
    } else {
      dateValue.value = ''
      timeValue.value = ''
    }
  },
  { immediate: true }
)

const validate = () => {
  touched.value = true
  if (props.required && (!dateValue.value || !timeValue.value)) {
    errorMessage.value = '请选择日期和时间'
    return false
  }
  errorMessage.value = ''
  return true
}

const showError = computed(() => touched.value && errorMessage.value)

const updateValue = () => {
  if (dateValue.value && timeValue.value) {
    emit('update:modelValue', `${dateValue.value} ${timeValue.value}`)
  } else {
    emit('update:modelValue', '')
  }
}

const handleDateChange = (e) => {
  touched.value = true
  dateValue.value = e.detail.value
  updateValue()
  nextTick(() => {
    validate()
  })
}

const handleTimeChange = (e) => {
  touched.value = true
  timeValue.value = e.detail.value
  updateValue()
  nextTick(() => {
    validate()
  })
}

defineExpose({
  validate
})
</script>

<style scoped>
.datetime-picker {
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.picker-container {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.date-part {
  flex: 3;
}

.time-part {
  flex: 2;
}

.divider {
  width: 2rpx;
  height: 40rpx;
  background-color: #ddd;
  margin: 0 20rpx;
}

.uni-input {
  font-size: 28rpx;
  color: #333;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.picker-container.error {
  border-color: #ff4d4f;
}

.error-text {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-top: 8rpx;
}

.required {
  color: #ff4d4f;
  margin-right: 4rpx;
}
</style>